import { SVG } from '@svgdotjs/svg.js'
import { edgeConfig } from '../config/edgeConfig'
import { getDataURL } from '../utils'

/**
 * 创建上升沿和下降沿背景图
 */
export function initEdge() {
    const color = 'blue'

    const { low, high, rise, neg, height } = edgeConfig.size
    const totalWidth = low + rise + high + neg

    const edgeSvg = SVG().size(totalWidth, height)

    // 画出一个竖着的虚线
    edgeSvg
        .path(
            `
        M 0 0
        l 0 ${height}
        `
        )
        .stroke({ color: '#111', width: 1, dasharray: '2 2' })
        .fill('none')

    // 画出一个低电平-上升沿-高电平-下降沿的图形
    edgeSvg
        .path(
            `
    M 0 ${height}
    l ${low} 0
    c ${rise / 2} 0 ${rise / 2} -${height} ${rise} -${height}
    l ${high} 0
    c ${neg / 2} 0 ${neg / 2} ${height} ${neg} ${height}
    `
        )
        .stroke({ color, width: 1 })
        .fill('none')

    /* 样式 */
    // 创建一个style标签，将dataURL写入
    let style = document.getElementById('edge-style')
    if (!style) {
        style = document.createElement('style')
        style.id = 'edge-style'
        // 将style标签添加到head中
        document.head.appendChild(style)
    }
    style.innerHTML = `
       .graphic .main {
              background-image: url(${getDataURL(edgeSvg)});
              background-repeat: repeat-x;
       }
    `
}
